<template>
    <div class="container" ref="limitera">
         <div class="title-text"> <span>欢迎来到绿地安全卫士</span> </div>
         <div class="app-code">
      <transition name="el-fade-in-linear">
            <img src="../assets/image/app-code.png" alt="app下载二维码" v-show="showCode">
      </transition>
      </div>
     <el-button type="success" round size="medium" class="buton" @click="showAppCode()">点击下载 App</el-button>
    </div>
</template>

<script>
import {GetBingImage} from '../axios'
export default {

    data() {
        return {
            showCode:false
        };
    },

    mounted() {
        this.getBingImageClick()
    },

    methods: {
         getBingImageClick(){
            // https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN
            // {"images":[{"startdate":"20220513","fullstartdate":"202205131600","enddate":"20220514","url":"/th?id=OHR.WindmillDay_ZH-CN3115996668_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp","urlbase":"/th?id=OHR.WindmillDay_ZH-CN3115996668","copyright":"金德代克风车群，荷兰 (© Achim Thomae/Getty Images)","copyrightlink":"https://www.bing.com/search?q=%E9%87%91%E5%BE%B7%E4%BB%A3%E5%85%8B%E9%A3%8E%E8%BD%A6%E7%BE%A4&form=hpcapt&mkt=zh-cn","title":"可靠的移水器","quiz":"/search?q=Bing+homepage+quiz&filters=WQOskey:%22HPQuiz_20220513_WindmillDay%22&FORM=HPQUIZ","wp":true,"hsh":"fca2d6f9eef4dd480960de7f09e15522","drk":1,"top":1,"bot":1,"hs":[]}],"tooltips":{"loading":"正在加载...","previous":"上一个图像","next":"下一个图像","walle":"此图片不能下载用作壁纸。","walls":"下载今日美图。仅限用作桌面壁纸。"}}
            // 拿到数据中url字段，前面加上https://cn.bing.com 就可以获取网络图片
            GetBingImage().then(sucess=>{
                this.$nextTick(()=>{
                    this.$refs.limitera.style.backgroundImage="url(https://cn.bing.com"+sucess.images[0].url+ ")"
                });
            })
       },
       showAppCode(){
           this.showCode=!this.showCode
           this.$notify.info({
                title: '抱歉',
                message: '更多内容请从电脑端登录查看~'
            });
       }
    },
};
</script>

<style scoped>
.container{
    width: 100%;
    height: 100%;
    /* background-repeat: no-repeat; */
    background-size:100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.app-code{
  opacity: 0.95;
  margin-bottom: 50px;
}
.title-text{
  margin-bottom: 200px;
}
.title-text span{
  color: #ffffff;
  font-size: 30px;
}
.buton{
  width: 150px;
  height: 50px;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>